<template>
  <common-card title="累计用户数" :value="usersTotal | numberFormat">
    <template>
      <v-chart :options="getOptions()" autoresize></v-chart>
    </template>
    <template #total>
      <div class="users-total">
        <span>日同比</span>
        <span class="emphasis">{{userGrowthLastDay+'%'}}</span>
        <div :class="userGrowthLastDay>0 ? 'increment' : 'decrement'"></div>
        <span style="margin-left: 10px">月同比</span>
        <span class="emphasis">{{userGrowthLastMonth+'%'}}</span>
        <div :class="userGrowthLastMonth>0 ? 'increment' : 'decrement'"></div>
      </div>
    </template>
  </common-card>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'TotalUsers',

  /* 
  "usersTotal": 1177965,
  "usersLastDay": 1000000,
  "usersLastMonth": 800000,
  "userGrowthLastDay": "17.70",
  "userGrowthLastMonth": "47.12",
  */
  computed: {
    ...mapState({
      usersTotal: state => state.data.reportData.usersTotal,
      usersLastDay: state => state.data.reportData.usersLastDay,
      usersLastMonth: state => state.data.reportData.usersLastMonth,
      userGrowthLastDay: state => state.data.reportData.userGrowthLastDay,
      userGrowthLastMonth: state => state.data.reportData.userGrowthLastMonth,
    })
  },

  methods: {
    getOptions () {
      return {
        xAxis: {
          show: false,
          type: 'value', // x轴为value值
          min: 0,
          max: this.usersTotal, // 指定最大值为当前总人数
        },
        yAxis: {
          show: false, 
          type: 'category' // y轴为类目轴
        },
        series: {
          name: '用户月增长量',
          type: 'bar',
          data: [this.usersTotal - this.usersLastMonth],  // 月增长数量
          showBackground: true, // 显示柱条的背景
          barWidth: '30%', // 柱条的宽度
          label: { // 文字
            show: true, // 显示,
            formatter: '|', // 内容
            position: 'right', // 位置
            distance: 1, // 距离
          }
        },
        tooltip: {},
        grid: {
          left: 0,
          top: 0,
          right: 0,
          bottom: 0
        },
        color: '#9ACD32'
      }
    }
  }
}
</script>

<style scoped>
  .users-total {
    display: flex;
  }
</style>
